<script setup>
// No reactive state needed for this component
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Divider Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Divider</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <p class="mb-2">Standard horizontal divider</p>
            <Divider />
            <p class="mt-2">Content after divider</p>
          </div>

          <div>
            <p class="mb-2">Divider with content</p>
            <Divider>
              <span>Section Divider</span>
            </Divider>
            <p class="mt-2">Content after divider with text</p>
          </div>

          <div>
            <p class="mb-2">Divider with aligned content</p>
            <Divider align-content="start">
              <span>Start</span>
            </Divider>
            <Divider align-content="center" class="my-4">
              <span>Center</span>
            </Divider>
            <Divider align-content="end">
              <span>End</span>
            </Divider>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Divider Variations</h3>

        <div class="mb-6">
          <h4 class="mb-2 text-sm font-medium">Appearance Variations</h4>
          <Divider appearance="strong" class="mb-4" />
          <p class="mb-2">Strong</p>

          <Divider appearance="brand" class="mb-4" />
          <p class="mb-2">Brand</p>

          <Divider appearance="subtle" class="mb-4" />
          <p class="mb-2">Subtle</p>
        </div>

        <div class="mb-6">
          <h4 class="mb-2 text-sm font-medium">Vertical Divider</h4>
          <div class="flex h-16 items-center">
            <span>Left</span>
            <Divider orientation="vertical" class="mx-4 h-full" />
            <span>Middle</span>
            <Divider orientation="vertical" class="mx-4 h-full" />
            <span>Right</span>
          </div>
        </div>

        <div>
          <h4 class="mb-2 text-sm font-medium">Inset Divider</h4>
          <p class="mb-2">With padding on edges:</p>
          <Divider inset />
          <p class="mt-2">Content after inset divider</p>
        </div>
      </div>
    </div>
  </div>
</template>
